@require 'nib'
// 公共样式
@require 'partials/base.styl'
// 公共样式
@require 'partials/common.styl'
// 首位布局
@require 'layout/index.styl'

.container
  width 1200px
  
#guessyou
  // height 269px
  margin-bottom 20px
  overflow hidden
  font-size 12px
  
  .mt
    overflow hidden
    
    .extra
      height 18px
      padding-right 25px
      margin-top 8px
      background url($CONTEXT_PATH/images/commons/homebg.png) no-repeat -310px -5px 
      float right
      display inline
      
  .mc
    // height 232px
    border 1px solid #ededed
    border-top 0
    overflow visible
    
    .spacer
      position relative
      height 1px
      line-height 0
      font-size 0
      background-color #d1d1d1
      
      i
        width 365px 
        height 5px 
        overflow hidden 
        position absolute 
        right -1px 
        top -2px 
        background #b72323 url($CONTEXT_PATH/images/commons/homebg.png) no-repeat 0 -124px 
        
    ul
      // height 210px 
      padding-top 20px 
      overflow hidden     
      
      li
        float left 
        width 199px 
        overflow hidden 
        padding-bottom 15px 
        
        .inner
          border 1px solid transparent
          padding 20px
          &:hover
            border-color #e4393c
        
        .p-img
          overflow hidden
          text-align center 
          margin-bottom 10px 
        
        .p-name
          height 34px 
          margin-bottom 6px 
    
        .p-price 
          color #b51d1a 
          font-size 18px 
          
          i
            font-size 14px
            font-style normal  
          
        .p-info
          border-left 0 none  
          
        .p-name, .p-price
          overflow hidden  
        
        .p-btn
          margin 15px 0 0
          text-align center
          
          .btn-append
            display block
            height 28px
            line-height 28px
            border 1px solid #999
            color #666
            text-align center
            border-radius 2px
            
            &:hover
              border-color #e4393c
              background #e4393c
              color #fff
              
              b
                background-position -28px -57px
            
            b
              display inline-block 
              height 18px 
              width 18px 
              margin-right 5px 
              background url($CONTEXT_PATH/images/commons/addtocart-icons.png) no-repeat 0 -57px 
              overflow hidden 
              vertical-align middle 
              
              &:hover
                background-position -28px -57px 
        
  h2
    color #333
    float left
    display inline
    line-height 30px
    font-size 20px
    padding-right 228px
    background url($CONTEXT_PATH/images/commons/homebg.png) 85px -91px
    
  a
    color #666666
    text-decoration none  
    
#shopping-cart-wrapper

  ul.list    
    li
      border 1px solid #ccc
      margin-bottom 10px
      padding 10px 20px
      background #fcfcfc
      height 60px
      line-height @height
            
    .pic, .info, .price, .amount, .sum, .op
      display inline-block 
      vertical-align top
      height 60px
      line-height @height
      
    .info
      padding 0 10px
      width 300px
      
      .name
        width 100%
        display inline-block
        ellipsis()
        
    .price, .sum
      width 150px
      color #f40
      text-align right
      padding 0 10px
          
    .amount
      overflow hidden
      position relative
      z-index 1
      width 150px
      
      .minus
        display block 
        height 23px 
        width 17px 
        border 1px solid #e5e5e5 
        background #f0f0f0 
        text-align center 
        line-height 23px 
        position absolute 
        top 17px 
        right 59px
        
      .text
        width 39px 
        height 15px 
        line-height 15px 
        border 1px solid #aaa 
        color #343434 
        text-align center 
        padding 4px 0 
        background-color #fff 
        background-position -75px -375px 
        position absolute 
        z-index 2 
        right 18px 
        top 17px 
        
      .plus
        display block 
        height 23px 
        width 17px 
        border 1px solid #e5e5e5 
        background #f0f0f0 
        text-align center 
        line-height 23px 
        position absolute 
        top 17px 
        right 0
      
    .op
      width 200px
      text-align right
      .del
        background-color #da4f49
        background linear-gradient(top, #ee5f5b, #bd362f)
        background-repeat repeat-x
        
        width 100px
        height 34px
        color #333333
        text-align: center
        border-radius 4px
        text-shadow 0 1px 1px rgba(255, 255, 255, 0.75)
        box-shadow inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05)
        cursor pointer
        outline none
        
        &, &:hover
          text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
          color: #ffffff;
  
.total-wrapper
  text-align right

  .num, .unit, .total
    padding 0 3px
    color #f40
    font-weight 900
    font-size 18px
    font-family tohoma,arial
    font-style normal
  
  .unit
    font-family arial  
    font-size 16px

  .total
    font-size 22px
    
table 
  border-collapse collapse
  border-spacing 0
 
::selection,
::-moz-selection 
  background transparent
 
#basket-message 
  width 100%
  text-align center
  font-weight normal
 
#wrap 
  position relative
  width 400px
  margin 0 auto
 
#default-item-list 
  width 400px
  margin 0 auto
  padding 0
  height 120px
  padding-left 1px
 
#default-item-list li 
  width 126.33333333333333px
  margin 0 5px 5px 0
  float left
  cursor pointer
  border 1px solid #d9d9d9
  text-align center
  font-size 12px
  padding 10px 0
 
#default-item-list li:hover 
  background #e9e9e9
  border-color #a9a9a9
  color #666
 
#default-item-list li:active 
  background #a9a9a9
  color #fff
  border-color #555
  box-shadow inset 0 0 5px 1px rgba(0, 0, 0, 0.3)
 
#default-item-list .price:before 
  content '£'
 
#default-item-list .name 
  display block
  font-size 16px
 
table 
  position absolute
  top 220px
  width 400px
  color #444
 
table tbody tr 
  height 20px
 
table tbody tr:last-child td 
  border-bottom none
 
table tbody tr:hover 
  background #e9e9e9
 
table tbody td 
  width 15px
  vertical-align middle
  border-bottom 1px solid #a7a7a7
  height 50px
 
table tbody td.quantity-total 
  width 40px
  text-align right
 
table tbody td.name 
  width 200px
 
table tbody td.sub-total 
  width 60px
  text-align right
 
table tbody td.sub-total:before 
  content '£'
 
table tbody.empty td 
  color #ccc
  border none
  text-align center
 
table tbody.empty tr:hover 
  background #fff
 
table tbody .quantity 
  position relative
  cursor pointer
  background url(../img/jqueryuiTheme.png) no-repeat -3px -20px
  height 10px
  width 10px
  left 3px
  display block
 
table tbody .quantity[data-type="decrease"] 
  background-position -68px -20px
 
table #total 
  text-align right
  height 50px
  font-size 20px
  border-top 1px solid #000
  color #000
 
table #total:before 
  content '£'
 
#default-item-list 
  list-style none
 